<template>
  <a-modal
    v-model:visible="visible"
    :width="500"
    centered
    :maskClosable="false"
    destroyOnClose
    @ok="onFinish"
    title="关注号码牌录入"
    :confirm-loading="confirmLoading"
  >
    <a-form @finish="onFinish" @finishFailed="onFinishFailed">
      <a-form-item name="name" label="号码牌号">
        <a-input v-model:value="formState.name" placeholder="请输入"></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { onMounted, reactive, toRefs, ref, watch, computed } from "vue";
import { message } from "ant-design-vue";
import { updatePlayer } from "@/api/marathon";

export default {
  name: "NumberEntryAddModal",
  props: {
    modalVisible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    onMounted(() => {
      init();
    });
    const init = () => {};

    const state = reactive({
      confirmLoading: false,
      visible: ref(props.modalVisible),
      fileList: [],
      formState: {
        name: "",
      },
    });

    watch(
      () => props.modalVisible,
      (value) => {
        if (!value) resetFields();
        state.visible = value;
      }
    );

    const resetFields = () => {
      state.formState = {
        name: "",
      };
    };

    const handleCancel = () => {
      emit("cancel");
    };

    const name = computed(() => {
      if (!state.fileList || state.fileList.length < 1) {
        return "未选择任何文件";
      }
      return state.fileList[0].name;
    });

    const onFinish = () => {
      updatePlayer(state.formState).then((res) => {
        if (res.result) {
          message.success("新增成功");
          emit("submit");
          emit("cancel");
        } else {
          message.error("新增失败");
        }
      });
    };

    const onFinishFailed = (errorInfo) => {
      message.error(errorInfo);
      console.log(errorInfo);
    };

    const uploadFunc = (res) => {
      console.log(res);
    };

    return {
      ...toRefs(state),
      handleCancel,
      name,
      onFinish,
      onFinishFailed,
      uploadFunc,
    };
  },
};
</script>

<style lang="scss"></style>
